<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>房贷计算器</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui/demo/demo.css">
</head>
<body>
    <h2>房贷计算器</h2>
    <div class="easyui-layout" style="width:801px;height:570px;">
        <div data-options="region:'center',title:'房贷详情'"  style="padding:10px;"  >
            
            <div style="width:380px;height:100px;  margin-bottom: 10px ">
                <div class="easyui-panel" title="贷款类别" style="width:380px;height:100px; padding:10px; " >

                    <div>
                        <input id="cc" style="width:250px;">
                    </div>
                    <div id="sp">
                        <div style="line-height:22px;background:#fafafa;padding:5px;">请选择贷款类别</div>
                        <div style="padding:10px">
                            <input type="radio" name="dai_kuan_lei_bie" value="gong_ji_jin_dai_kuan" checked ="checked" ><span>公积金贷款</span><br/>
                            <input type="radio" name="dai_kuan_lei_bie" value="shang_ye_dai_kuan"><span>商业贷款</span>
                        </div>
                    </div>

                    <div>
                        <input  id="id_dai_kuan_li_lv" class="easyui-textbox" type="text" name="dai_kuan_li_lv" value="3.25" label="贷款利率:" labelPosition="left" style="width:250px;"> %

                    </div>
                </div>
            </div>
            
            <div style="width:380px;height:130px;  margin-bottom: 10px ">
                <div id="id_ji_suan_fang_shi" class="easyui-tabs" style="width:380px;height:130px">
                    <div title="根据面积、单价、首付比例计算" style="padding:10px">
                        <div>
                            <input  id="id_dan_jia" class="easyui-textbox" type="text" name="dan_jia" label="单价:" labelPosition="left" style="width:250px;"> 元/平方米
                        </div>

                        <div>
                            <input  id="id_mian_ji" class="easyui-textbox" type="text" name="mian_ji" label="面积:" labelPosition="left" style="width:250px;"> 平方米
                        </div>

                        <div >
                            <select id ="id_shou_fu_bi_li" class="easyui-combobox" name="shou_fu_bi_li" label="首付比例:" labelPosition="left" style="width:250px;">
                                <option value="0">无</option>
                                <option value="0.1">1成</option>
                                <option value="0.2">2成</option>
                                <option value="0.3" selected = "selected">3成</option>
                                <option value="0.4">4成</option>
                                <option value="0.5">5成</option>
                                <option value="0.6">6成</option>
                                <option value="0.7">7成</option>
                                <option value="0.8">8成</option>
                                <option value="0.9">9成</option>
                            </select>
                        </div>
                    </div>
                    
                    <div title="根据贷款总额计算" style="padding:10px">
                        <div>
                            <input  id="id_dai_kuan_zong_e" class="easyui-textbox" type="text" name="dai_kuan_zong_e" label="贷款总额:" labelPosition="left" style="width:250px;"> 元
                        </div>
                    </div>
                </div>
            </div>
            
            <div style="width:380px;height:100px;  margin-bottom: 10px ">
                <div  class="easyui-panel" title="贷款年数" style="width:380px;height:100px; padding:10px;">
                    <div >
                        <select id="id_dai_kuan_nian_shu" class="easyui-combobox" name="dai_kuan_nian_shu" style="width:250px;" label="选择贷款年数:" labelPosition="left">
                            <option value="72">6年(72期)</option>
                            <option value="84">7年(84期)</option>
                            <option value="96">8年(96期)</option>
                            <option value="108">9年(108期)</option>
                            <option value="120">10年(120期)</option>
                            <option value="132">11年(132期)</option>
                            <option value="144">12年(144期)</option>
                            <option value="156">13年(156期)</option>
                            <option value="168">14年(168期)</option>
                            <option value="180">15年(180期)</option>
                            <option value="192">16年(192期)</option>
                            <option value="204">17年(204期)</option>
                            <option value="216">18年(216期)</option>
                            <option value="228">19年(228期)</option>
                            <option value="240">20年(240期)</option>
                            <option value="252">21年(252期)</option>
                            <option value="264">22年(264期)</option>
                            <option value="276">23年(276期)</option>
                            <option value="288">24年(288期)</option>
                            <option value="300">25年(300期)</option>
                            <option value="312">26年(312期)</option>
                            <option value="324">27年(324期)</option>
                            <option value="336">28年(336期)</option>
                            <option value="348">29年(348期)</option>
                            <option value="360" selected = "selected" >30年(360期)</option>
                        </select>
                    </div>

                </div>
            </div>
            
            <div style="width:380px;height:80px;  margin-bottom: 10px ">
                <div class="easyui-panel" title="还款方式" style="width:380px;height:80px; padding:10px;">

                    <div>
                        <input id="cc2" style="width:250px;">
                    </div>
                    <div id="sp2">
                        <div style="line-height:22px;background:#fafafa;padding:5px;">请选择还款方式</div>
                        <div style="padding:10px">
                            <input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_xi" checked ="checked" ><span>等额本息</span><br/>
                            <input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_jin"><span>等额本金</span>
                        </div>
                    </div>

                </div>
            </div>
            
            <div style="width:280px;height:30px;  margin-bottom: 10px ; padding-left: 100px ">
                <a href="#" id = "ji_suan" class="easyui-linkbutton c6" style="width:80px" >计算</a>
                <a href="#" id = "chong_zhi" class="easyui-linkbutton c2" style="width:80px">重置</a>
            </div>
        </div>
        
        <div data-options="region:'east',title:'计算结果',collapsible:false" style="width:400px;">
            <div style="width:370px;height:500px;  margin-bottom: 10px ;padding:10px">
                <div>
                    <input  id="id_jie_guo_fang_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guofang_kuan_zong_e" label="房款总额:" labelPosition="left" style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_shou_fu_shu_e" class="easyui-textbox" type="text" name="jie_guo_shou_fu_shu_e" label="首付数额:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_dai_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guo_dai_kuan_zong_e" label="贷款总额:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_huan_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guo_huan_kuan_zong_e" label="还款总额:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_li_xi_zong_e" class="easyui-textbox" type="text" name="jie_guo_li_xi_zong_e" label="利息总额:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_dai_kuan_yue_shu" class="easyui-textbox" type="text" name="jie_guo_dai_kuan_yue_shu" label="贷款月数:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div id="id_div_jie_guo_mei_yue_huan_kuan">
                    <input  id="id_jie_guo_mei_yue_huan_kuan" class="easyui-textbox" type="text" name="jie_guo_mei_yue_huan_kuan" label="每月还款:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div id="id_div_jie_guo_mei_yue_huan_kuan_qing_dan">
                    <input  id="id_jie_guo_mei_yue_huan_kuan_qing_dan" class="easyui-textbox" type="text" name="jie_guo_mei_yue_huan_kuan_qing_dan" label="每月还款:" labelPosition="left" multiline="true" style="width:250px;height:200px"> 
                </div>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="fd_easyui.js"></script>
</body>
</html>